@import '../../assets/styles/var';

.header-user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: $--g-color--white;
  font-size: $--g-font-size--default;
  height: 100%;

  &-avatar {
    width: $--g-header-avatar-size;
    height: $--g-header-avatar-size;
    background-image: url('./gsd-icon-avatar-circle-white-lager.svg') !important;
    background-repeat: no-repeat !important;
    opacity: 0.7;
    position: relative;
    // background-size: $--g-header-avatar-size $--g-header-avatar-size;
    background-size: 28px 28px !important;
    background-position: center !important;
    display: block;
    margin-right: 8px;
    transition: opacity 0.2s linear;
    &::before {
      position: absolute;
      top: 8px;
      left: -9px;
      width: 1px;
      height: 16px;
      content: '';
      opacity: 0.2;
      background: #ffffff;
    }
  }

  &:hover {
    .header-user-avatar {
      opacity: 1;
    }
  }

  &-content {
    display: flex;
    align-items: center;
    height: 100%;
  }

  &-login {
    &-btn {
      color: $--g-header-color--white--opacity;
      &:hover {
        color: $--g-color--white;
        font-weight: 500;
      }
    }
  }

  &-arrow {
    transition: transform 0.2s linear;

    &--hover {
      transform: scale(0.83333333) rotate(180deg) !important;
    }
  }

  .ant-dropdown-link {
    color: $--g-header-color--white--opacity;

    &:hover {
      color: $--g-color--white;
    }
  }
}
